che-toggle-joined-button
  margin 8px 0
  che-box-shadow()

  $button-enabled-background-color = #EAEFF5
  $button-disabled-background-color = $background-color
  $button-enabled-color = $primary-color
  $button-disabled-color = lighten($che-ide-background-color, 52%)
  $button-enabled-border-color = $primary-color
  $button-disabled-border-color = $box-border-color

  che-border-radius(2px)
  &:not(:last-of-type)
    border-top-right-radius 0 !important
    border-bottom-right-radius 0 !important
  &:not(:first-of-type)
    border-top-left-radius 0 !important
    border-bottom-left-radius 0 !important

  .md-button.md-button
    height 20px
    line-height 20px
    padding 1px 20px 0
    margin 0 -1px 0 0
    font-size 12px
    z-index 1

    color $button-enabled-color
    border-radius inherit
    border 1px solid $button-enabled-border-color
    background-color $button-enabled-background-color

    &:hover, &.che-toggle-button-enabled:hover
      background-color darken($button-enabled-background-color, 5%)

    & > span
      text-transform none

    md-icon
      color inherit
      vertical-align initial

    &.che-toggle-button-disabled
      color $button-disabled-color
      background-color $button-disabled-background-color
      border-color $button-disabled-border-color
      padding-top 0
      z-index 0

      &:hover
        background-color darken($button-disabled-background-color, 5%)

  md-icon
    padding-right 10px
    font-size 20px
    width auto
    height auto

